<template>
    <div class="exam-state">
        <div class="head border-radius p-1 d-flex between">
            <div class="filters">
                <label >
                    <span>班级:</span>
                    <Select class="w150" v-model="filters.cid" @on-change="getList_page(1)">
                        <Option v-for="val in classList" :value="val.id" :key="val.id">{{val.name}}班</Option>
                    </Select>
                </label>
                <Tooltip content="输入后按回车确认">
                    <label >
                        <span>姓名:</span>
                        <Input class="w150" clearable  v-model="filters.name" @on-enter="getList_page(1)" @on-clear="getList_page(1)"></Input>
                    </label>
                </Tooltip>
            </div>
        </div>
        <div class="content mt-1">
            <div v-if="filters.cid || filters.name" >
                <Table :columns="columns" class="diy_table" :data="list"></Table>
                <div class="clearfix mt-2">
                    <Page :current.sync="filters.page" :page-size="filters.list_rows" :total="total_page" show-sizer class="float-right" show-total @on-change="getList_page"/>
                </div>
            </div>
            <p v-else class="text-center">请先选择班级或学生</p>
        </div>
    </div>
</template>

<script>
import {lesson_transcript} from "@/common/tapi"
import {store} from "@/store"
import pageMixin from "@/common/pageMixin"
export default {
    mixins:[pageMixin],
    props:['lid'],
    data(){
        return {
            currentClassId:'',
            filters:{
                cid:'',
                name:''
            },
            columns:[
                {
                    title:'学号',
                    key:'student_no',
                    width:100,
                },
                {
                    title:'姓名',
                    width:100,
                    key:'student_name'
                },
                {
                    title:'交卷时间',
                    key:'create_time'
                },
                {
                    title:'得分率',
                    key:'accuracy',
                    width:100,
                    render:(h,params)=>h('p',params.row.accuracy+'%')
                },
                {
                    title:'查看',
                    render:(h,params)=>{
                        return h('i-button',{
                            props:{
                                type:'primary',
                                ghost:true
                            },
                            on:{
                                click:()=>{
                                    this.$router.push({name:'student_lesson_details',query:{id:params.row.id}})
                                }
                            }
                        },'查看')
                    }
                }
                
            ]
        }
    },
    methods:{
        getList(){
            lesson_transcript({lid:this.lid,...this.filters})
            .then(res=>{
                if(res){
                    this.list=res.data.list
                    this.total_page=res.data.pageinfo.total
                }
            })
        },
    },
    computed:{
        classList(){
            return store.classList
        }
    },
}   
</script>